import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    ImageBackground,
    TouchableOpacity
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign'; //图标
import color from '../../public/widget/color';
import {screen} from '../../public/common';
import {Toast} from '../../components/Toast';
import {checkPhonenum} from '../../public/widget/Util'
import NavigationUtil from '../../navigator/NavigationUtil';
import DataStore from '../../public/dao/DataStore';
import MyTextInput from '../../components/MytextInput';
import BackPressComponent from '../../components/BackPressComponent';
export default class Login extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: () => this.onBackPress()});
        this.state = {
            showReduceNum:false,
            reduceNum:60,
            name:'',
            mobile:'',
            code:''
        }
    }
    componentDidMount(){
        this.backPress.componentDidMount();
    }
    componentWillUnmount() {
        this.backPress.componentWillUnmount();
    }
    onBackPress() {
        NavigationUtil.goBack(this.props.navigation);
        return true;
    }
    _onChangeCodeText = (inputdata)=>{
        this.setState({
            code:inputdata
        })
    }
    reduceNumFun = ()=>{ //倒计时
        this.setState({
            reduceNum:this.state.reduceNum -= 1,
            showReduceNum:true
        }) 
        if(this.state.reduceNum != 0){
            setTimeout(() => {
                this.reduceNumFun()
            }, 1000);
        }else{
            this.setState({
                reduceNum:60,
                showReduceNum:false
            });
        }
    }
    _toLoginCheck = ()=>{
        let {name,mobile,code} = this.state;
        if(!name){
            Toast.show('用户名不能为空');
            return
        }
        if(!mobile || !checkPhonenum(mobile)){
            Toast.show('手机号不对')
            return
        }
        if(!code){
            Toast.show('请输入验证码')
            return
        }
        this._toSubmit({
            name,
            mobile,
            code,
            ref_customer_id:2
        })
    }
    _sendCode = ()=>{
        let dataStore = new DataStore();
        dataStore.fetchData('/webservice/getvc',{mobile:this.state.mobile},'POST','',true,true).then((json)=>{
            if(json.data.errno == 0){
                Toast.show('发送成功')
                this.reduceNumFun();
            }else{
                Toast.show('发送失败');
            }
        })
    }
    _toSubmit = (params)=>{
        // console.log(params)
        let dataStore = new DataStore();
        dataStore.fetchData('/webservice/login',params,'POST','',true,true).then((json)=>{
            if(json.data.errno == 0){
                Toast.show('登录成功');
                dataStore.saveData('USERDATAS',params)
                this.props.navigation.state.params.refresh(); //返回后刷新页面
                NavigationUtil.goBack(this.props.navigation);
            }else{
                Toast.show(json.data.errmsg)
            }
        })
    }
    render() {
        let {showReduceNum,reduceNum,mobile} = this.state;
        return (
            <ImageBackground style={styles.container} source={require('../../images/loginbg.jpg')}>
                <View style={styles.inputView}>
                    <View style={styles.waninputStyle}>
                        <AntDesign
                        name={'user'}
                        size={20}
                        />
                        <MyTextInput 
                            placeholder="请输入用户名"
                            editable={true}//是否可编辑
                            style={styles.inputStyle}//input框的基本样式
                            onChangeText={(name=>this.setState({name}))}//输入框改变触发的函数
                        />
                    </View>
                    <View style={styles.waninputStyle}>
                        <AntDesign
                            name={'mobile1'}
                            size={20}
                        />
                        <MyTextInput
                            maxLength={11}
                            keyboardType='numeric'
                            placeholder="请输入手机号"
                            editable={true}//是否可编辑
                            style={styles.inputStyle}//input框的基本样式
                            onChangeText={(mobile)=>this.setState({mobile})}
                        />
                    </View>
                    <View style={styles.waninputStyle}>
                        <AntDesign
                        name={'menuunfold'}
                        size={20}
                        />
                        <MyTextInput
                            maxLength={6}
                            placeholder="请输入验证码"
                            editable={true}//是否可编辑
                            style={styles.inputStyle}//input框的基本样式
                            onChangeText={(code)=>this.setState({code})}
                        />
                        {showReduceNum ? <Text style={styles.yanzheng}>剩余{reduceNum}S</Text> : <Text style={styles.yanzheng} 
                            onPress={()=>{
                                if(!mobile){
                                    Toast.show('请输入手机号');
                                    return;
                                }
                                if(!checkPhonenum(mobile)){
                                    Toast.show('手机号格式错误');
                                    return;
                                }
                                this._sendCode()
                            }}
                        >获取验证码</Text>}
                    </View>
                    <TouchableOpacity 
                        style={styles.buttonFont} 
                        onPress={() => {
                            this._toLoginCheck()
                        }}>
                        <Text style={styles.buttonText}>登录</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1, 
    },
    inputView:{
        justifyContent: 'center',
        textAlign:'center',
        marginTop: 200,
    },
    waninputStyle:{
        flexDirection: 'row',
        borderColor:color.border,
        borderBottomWidth:1,
        width:screen.width-100,
        marginLeft:50,
        alignItems: 'center',
    },
    inputStyle:{
        height:50,
        marginLeft:10,
        width:150
    },
    buttonFont: {
        marginTop:30,
        width:screen.width-160,
        marginLeft:80,
        backgroundColor:color.themeColor,
        padding: 12,
        borderRadius: 10,
    },
    buttonText:{
        fontSize: 20,
        textAlign:'center',
        color:'#fff',
    },
    yanzheng:{
        fontSize:17,
        color:color.themeColor
    }
});